<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="notice" :style="{ height: heightValue + 'px' }" v-cloak>
        <div class="icon">
            <img :src="iconUrl" />
        </div>
        <div class="items" :style="{ height: heightValue + 'px', color: fontColor, fontSize: fontSize }">
            <span v-if="items && items.length > 0">{{ items[0].title }}</span>
        </div>
    </div>
</template>

<script>
import { getNewsList } from "@/api/news";
export default {
    data () {
        return {
            loading: false,
            items: [
            ],
        };
    },
    props: {
        module: { type: Object },
    },

    watch: {
        "module.items": function (ids) {
            if (!ids || ids.length == 0) {
                this.loading = false;
                this.items = [];
                return;
            }
            this.loadData();
        },
    },

    mounted: function () {
        this.loadData();
    },

    computed: {
        heightValue: function () {
            var v = this.module.height
            if (v && v.value) {
                return v.value
            }
            return 100
        },
        iconUrl: function () {
            if (this.module.data.icon) {
                return this.module.data.icon;
            }
            // 默认icon
            return "https://tcdn.udeve.net/fang2021/c91c5e84-55fd-4fb2-a0ac-edfee71d73c3.png";
        },

        fontSize: function () {
            var s = this.module.data.fontSize
            if (!s) {
                return '24px'
            }
            return s + 'px'
        },

        fontColor: function () {
            var s = this.module.data.fontColor
            if (!s) {
                return '#333333'
            }
            return s
        },
    },

    methods: {
        loadData: function () {
            if (!this.module.items || this.module.items.length == 0) {
                return;
            }
            this.loading = true;
            var ids = this.module.items;
            var query = { ids: ids.join(",") };
            getNewsList(query).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.items = resp.data.result;
                }
            });
        },
    },
};
</script>

<style scoped>
.notice {
    margin: 0px auto;
    padding: 0 20px;
    box-sizing: border-box;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.notice .title {
    font-size: 26px;
    line-height: 100%;
}

.notice .icon {
    height: 72px;
    width: 80px;
    display: flex;
    align-items: center;
}

.notice .items {
    height: 100%;
    width: calc(100% - 100px);
    margin-left: 20px;
}

.notice .icon img {
    width: auto;
    /* height: 100%; */
    max-width: 80px;
    max-height: 72px;
}

.items {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>